
// ==================== src/router.tsx ====================
import React, { Suspense, lazy } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { Spin } from 'antd';
import AppLayout from './components/Layout/AppLayout';
import ErrorPage from './pages/Error/ErrorPage';

// 懒加载页面组件
const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'));
const VMList = lazy(() => import('./pages/VMList/VMList'));
const VMDetail = lazy(() => import('./pages/VMDetail/VMDetail'));
const CreateVMWizard = lazy(() => import('./pages/CreateVM/CreateVMWizard'));
const Networks = lazy(() => import('./pages/Networks/Networks'));
const Storage = lazy(() => import('./pages/Storage/Storage'));
const Settings = lazy(() => import('./pages/Settings/Settings'));

// 加载中组件
const PageLoader: React.FC = () => (
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '400px',
    }}
  >
    <Spin size="large" tip="加载中..." />
  </div>
);

// 路由配置
export const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<PageLoader />}>
            <Dashboard />
          </Suspense>
        ),
      },
      {
        path: 'vms',
        children: [
          {
            index: true,
            element: (
              <Suspense fallback={<PageLoader />}>
                <VMList />
              </Suspense>
            ),
          },
          {
            path: ':name',
            element: (
              <Suspense fallback={<PageLoader />}>
                <VMDetail />
              </Suspense>
            ),
          },
        ],
      },
      {
        path: 'create',
        element: (
          <Suspense fallback={<PageLoader />}>
            <CreateVMWizard />
          </Suspense>
        ),
      },
      {
        path: 'networks',
        element: (
          <Suspense fallback={<PageLoader />}>
            <Networks />
          </Suspense>
        ),
      },
      {
        path: 'storage',
        element: (
          <Suspense fallback={<PageLoader />}>
            <Storage />
          </Suspense>
        ),
      },
      {
        path: 'settings',
        element: (
          <Suspense fallback={<PageLoader />}>
            <Settings />
          </Suspense>
        ),
      },
    ],
  },
  {
    path: '*',
    element: <Navigate to="/" replace />,
  },
]);